import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView,
} from 'react-native';

import {
    DatePicker,
} from 'react-native-pickers'

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import StorageUtils from '../Utils/StorageUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import Constant from '../Constant/Constant'
import RouterUtils from '../Utils/RouterUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class UserCaseSearch extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: true,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '选择时间范围',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            loading: false,
            unit: ['年', '月', '日'],
            startYear: 2020,
            endYear: 2020,
            keyData: '',
            startTime: '请选择',
            endTime: '请选择',
            selectType: '1',
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('UserCaseSearch', this.props.navigation.state.key);
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('UserCaseSearch', this.props.navigation.state.key);
    }

    selectStartDate(val)
    {
        this.state.selectType = val;
        this.startDatePicker.show()
    }

    createPeroidDate()
    {
        try
        {
            RuleUtils.checkDateSelect(this.state.startTime, '请选择开始时间');
            RuleUtils.checkDateSelect(this.state.endTime, '请选择结束时间');
            RuleUtils.validTime('2020/' + this.state.startTime + ' 00:00:00', '2020/' + this.state.endTime + ' 00:00:00');
            this.props.navigation.goBack();
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    render()
    {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <TouchableOpacity activeOpacity={0.5} onPress={() => this.selectStartDate('1')}>
                        <View style={{height: 50, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                            <Text style={{margin: 16, flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.gray}}>开始时间</Text>
                            <Text style={{marginLeft: 8, marginRight: 4, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>{this.state.startTime}</Text>
                            <Image style={{width: 9, height: 14, marginRight: 8,}} source={require('../img/arrowright.png')}/>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5} onPress={() => this.selectStartDate('2')}>
                        <View style={{height: 50, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                            <Text style={{margin: 16, flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.gray}}>结束时间</Text>
                            <Text style={{marginLeft: 8, marginRight: 4, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>{this.state.endTime}</Text>
                            <Image style={{width: 9, height: 14, marginRight: 8,}} source={require('../img/arrowright.png')}/>
                        </View>
                    </TouchableOpacity>
                    <View style={{margin: 32}}>
                        <TouchableOpacity onPress={() => this.createPeroidDate()}>
                            <View style={{justifyContent: 'center', alignItems: 'center', height: 44, padding: 4, borderRadius: 6, backgroundColor: ColorUtils.blue}}>
                                <Text style={{color: ColorUtils.white, fontSize: ScreenUtils.Font_14}}>
                                    确定
                                </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
                <DatePicker
                    HH={false}
                    mm={false}
                    ss={false}
                    unit={this.state.unit}
                    startYear={this.state.startYear}
                    endYear={this.state.endYear}
                    onPickerConfirm={(value) =>
                    {
                        if (this.state.selectType == '1')
                        {
                            this.setState({
                                startTime: TimeUtils.convertToDate(value)
                            })
                        } else
                        {
                            this.setState({
                                endTime: TimeUtils.convertToDate(value)
                            })
                        }
                    }}
                    onPickerCancel={() =>
                    {
                        // alert('cancel')
                    }}
                    ref={ref => this.startDatePicker = ref}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.bgColor,
    },
});


